<template>
  <div id="app">
    <h1>我的记账工具</h1>
    
    <!-- 添加交易的表单 -->
    <div class="add-transaction">
      <h2>添加新交易</h2>
      <form @submit.prevent="addTransaction">
        <div>
          <label>日期:</label>
          <input type="date" v-model="newTransaction.date" required>
        </div>
        <div>
          <label>类型:</label>
          <select v-model="newTransaction.type" required>
            <option value="expense">支出</option>
            <option value="income">收入</option>
          </select>
        </div>
        <div>
          <label>分类:</label>
          <input type="text" v-model="newTransaction.category" required>
        </div>
        <div>
          <label>金额:</label>
          <input type="number" step="0.01" v-model="newTransaction.amount" required>
        </div>
        <div>
          <label>描述:</label>
          <input type="text" v-model="newTransaction.description">
        </div>
        <button type="submit">添加</button>
      </form>
    </div>

    <!-- 月度消费总和 -->
    <div class="monthly-sum">
      <h2>本月消费总和: {{ monthlyTotal }} 元</h2>
      <button @click="loadMonthlyData">刷新数据</button>
    </div>

    <!-- 交易列表 -->
    <div class="transaction-list">
      <h2>交易记录</h2>
      <table>
        <thead>
          <tr>
            <th @click="sortTransactions('date')">日期</th>
            <th @click="sortTransactions('type')">类型</th>
            <th @click="sortTransactions('category')">分类</th>
            <th @click="sortTransactions('amount')">金额</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="transaction in transactions" :key="transaction.id">
            <td>{{ formatDate(transaction.date) }}</td>
            <td>{{ transaction.type === 'expense' ? '支出' : '收入' }}</td>
            <td>{{ transaction.category }}</td>
            <td :class="{ 'expense': transaction.type === 'expense', 'income': transaction.type === 'income' }">
              {{ transaction.amount.toFixed(2) }}
            </td>
            <td>{{ transaction.description }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'App',
  setup() {
    // 使用ref创建响应式数据
    const transactions = ref([])
    const monthlyTotal = ref(0)
    const newTransaction = ref({
      date: new Date().toISOString().split('T')[0], // 默认今天
      type: 'expense',
      category: '',
      amount: 0,
      description: ''
    })

    // 方法
    const addTransaction = async () => {
      try {
        // 调用后端Go方法
        await window.go.main.App.AddTransaction(newTransaction.value)
        alert('添加成功！')
        // 清空表单
        newTransaction.value = { date: new Date().toISOString().split('T')[0], type: 'expense', category: '', amount: 0, description: '' }
        // 重新加载数据
        loadMonthlyData()
      } catch (error) {
        console.error('Failed to add transaction:', error)
        alert('添加失败！')
      }
    }

    const loadMonthlyData = async () => {
      try {
        const now = new Date()
        // 获取当前年月的交易记录
        transactions.value = await window.go.main.App.GetMonthlyTransactions(now.getFullYear(), now.getMonth() + 1)
        // 获取当前年月的消费总和
        monthlyTotal.value = await window.go.main.App.GetMonthlyExpenseSum(now.getFullYear(), now.getMonth() + 1)
      } catch (error) {
        console.error('Failed to load data:', error)
      }
    }

    const sortTransactions = (key) => {
      // 实现简单的排序逻辑
      transactions.value.sort((a, b) => {
        if (a[key] < b[key]) return -1
        if (a[key] > b[key]) return 1
        return 0
      })
    }

    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    // 生命周期钩子
    onMounted(() => {
      loadMonthlyData()
    })

    // 返回模板中需要使用的数据和方法
    return {
      transactions,
      monthlyTotal,
      newTransaction,
      addTransaction,
      loadMonthlyData,
      sortTransactions,
      formatDate
    }
  }
}
</script>

<style>
/* 在这里添加你的CSS样式 */
.expense { color: red; }
.income { color: green; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; cursor: pointer; }
</style>